<template>
	<uni-popup ref="share" type="top" :custom="true" @touchmove.stop.prevent="moveHandle" @change="popupchange">
		<view :class="darkMode?'custom-dark container':'custom-light container'">
			<uni-nav-bar :fixed="true" color="#333333" :background-color="themeBgColor" :border="false">
				<!-- 顶部面板 -->
				<view class="input-view">
					<uni-icons type="search" size="22" color="#666666" />
					<input v-model="searchVal" confirm-type="search" class="input" type="text" placeholder="物料代码/名称/规格" @confirm="search">
					<uni-icons :color="'#999999'" v-if="searchVal!==''" class="icon-clear" type="clear" size="22" @click="clearSearch" />
				</view>
				<uni-icons :color="'#999999'" class="icon-close" type="close" size="28" @click="close" />
			</uni-nav-bar>
			<!-- 滚动区域 -->
			<view class="scroll-panel" id="scroll-panel">
				<view class="list-box">
					<view class="left">
						<scroll-view scroll-y="true" :style="{'height':scrollHeight}" :scroll-with-animation="true" >
							<view class="item" 
								v-for="(item,index) in leftArray"
								:class="{ 'active':index==leftIndex }" 
								:id="item.id"
								:data-index="index"
								@tap="leftTap"
							>{{item.name}}</view>
						</scroll-view>
					</view>
					<view class="main">
						<mescroll-uni :style="{'height':scrollHeight}" :down="downOption" @init="mescrollInit" @emptyclick="downCallback" @down="downCallback" :up="upOption" :bottom="100"
						 @up="upCallback" :fixed="false">
							<view class="mycard">
								<view v-for="item in cardList" :key="item.matid" class="card-item">
									<uni-card is-full>
										<view class="audit-card-content">
											<view class="uni-flex uni-row">
												<view class="flex-item-100">
													<checkbox-group @change="checkboxChange(item)" :id="item.matid">
														<label>
															<checkbox class="blue" :value="item.matid" :checked="item.sel" style="transform:scale(0.7)" />{{item.matname}}
														</label>
													</checkbox-group>
												</view>
											</view>
											<view class="uni-flex uni-row">
												<view class="flex-item-20">
													<image style="width: 64rpx; height: 64rpx;" mode="aspectFit" :src="item.imgpath"></image>
												</view>
												<view class="flex-item-80">
													<view class="flex-item-100">{{item.matnum}}</view>
													<view class="flex-item-100">{{item.model}}</view>
												</view>
											</view>
										</view>
									</uni-card>
								</view>
							</view>
						</mescroll-uni>
					</view>
					<view class="goods-carts">
						<uni-goods-nav :options="goodNavOptions" :button-group="goodNavButtonGroup" @buttonClick="goodNavButtonClick" />
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import {mapGetters} from 'vuex'
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		props: {
			propSelItem: {},
		},
		components: {
			MescrollUni,
			uniIcons,
			uniNavBar,
			uniPopup,
		},
		computed: {
			...mapGetters(['themeBgColor', 'darkMode', 'user']),
		},
		data() {
			return {
				_uimainid: 246,//物料档案查询
				scrollHeight:0,
				leftArray:[],
				mainArray:[],
				leftIndex:0,
				winHeight: "", // 窗口高度
				currentTab: 0, // 预设当前项的值
				scrollLeft: 0, // tab标题的滚动条位置
				searchVal: '',
				mescroll: null,
				isPass: false,
				selectedProject: {},
				//是否显示过滤
				showRight: false,
				txtMatClsID: "",
				txtKey: "",
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					toTop: {
						src: '/static/img/backtop.png'
					},
					textNoMore: '没有更多数据了',
				},
				cardList: [],
				goodNavOptions: [{text: '选择0项'}],
				goodNavButtonGroup: [{
					text: '确定',
					backgroundColor: '#39b54a',
					color: '#fff'
				}],
			}
		},
		filters: {
			dateFormate: function(v) {
				return formatDateDay(v);
			},
		},
		onReady() {
			// uni.setNavigationBarTitle({
			// 	title: this.$t('SaleOrder')
			// })
			this.setNavBarColor();
			this.setDarkMode();
		},
		watch: {
			themeBgColor() {
				this.setNavBarColor()
			},
			darkMode() {
				this.setDarkMode()
			}
		},
		onShow(e) {
			// setNavBar
			this.setNavBarColor()
			// pages
			let pages = getCurrentPages()
			let currPage = pages[pages.length - 1]
			if (currPage.isDoRefresh === true) {
				currPage.isDoRefresh = false
			}
		},
		mounted(){
			/* 等待DOM挂载完成 */
			this.$nextTick(()=>{
				/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
				setTimeout(()=>{
					/* 等待滚动区域初始化完成 */
					this.initScrollView().then(()=>{
						/* 获取列表数据，你的代码从此处开始 */
						this.getListData();
						})
				},200);
			})
		},
		methods: {
			/* 初始化滚动区域 */
			initScrollView(){
				return new Promise((resolve, reject)=>{
					//  高度自适应
					uni.getSystemInfo({
						success: res => {
							this.winHeight = res.windowHeight;
							this.winWidth = res.windowWidth;
							this.scrollHeight = `${this.winHeight-50}px`;
						}
					});
					
					let view = uni.createSelectorQuery().in(this).select('#scroll-panel');
					view.boundingClientRect(res => {
						//this.scrollHeight = `${res.height}px`;
						this.$nextTick(()=>{
							resolve();
						})
					}).exec();
				});
			},
			/* 获取物料分类数据 */
			getListData(){
				this.$minApi.Find({
					data: {"_entityid":645,"qualifier":"Forbidden=0","sort":"Number","sortdir":"0","fetchlimit":"100"}
				}).then(res => {
					if (res.Status === 1) {
						// 接口返回的当前页数据列表 (数组)
						let [left,main]=[[],[]];
						let matclsdatas = JSON.parse(res.Data);
						uni.showLoading();
						setTimeout(()=>{
							left.push({id:0,name:`全部`});
							matclsdatas.forEach(matcls=>{
								left.push({id:matcls.ID,name:`${matcls.Name}`});
							});
						},1000);
						uni.hideLoading();
						this.leftArray=left;
						this.mainArray=main;
					} else {
						
					}
				}).catch(exp => {
					// 失败隐藏下拉加载状态
					console.log(exp);
				});
			},
			/* 左侧导航点击 */
			leftTap(e){
				let index=e.currentTarget.dataset.index;
				this.leftIndex=Number(index);
				this.mescroll.formdata = {
					txtMatClsID: e.currentTarget.id,
					txtKey: "",
				};
				this.mescroll.resetUpScroll();
			},
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
				this.mescroll = mescroll;
				this.mescroll.formdata = {
					txtMatClsID: "",
					txtKey: "",
				};
			},
			/*下拉刷新的回调, 有三种处理方式: */
			downCallback(mescroll) {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
				mescroll.resetUpScroll() // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(mescroll) {
				if (!this.user) {
					mescroll.endErr();
					return;
				}
				// 此时mescroll会携带page的参数:
				mescroll.formdata._code = "M_MAT_001";//移动端物料列表
				mescroll.formdata.pageindex = mescroll.num; // 页码, 默认从1开始
				mescroll.formdata.pagesize = mescroll.size; // 页码, 默认10
				mescroll.formdata.txtKey=this.searchVal;
				this.$minApi.GetDataTable({
					data: mescroll.formdata
				}).then(res => {
					if (res.Status === 1) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = JSON.parse(res.Data);
						// 接口返回的总页数 (比如列表有26个数据,每页10条,共3页; 则totalPage值为3)
						let totalPage = 100 //res.data.length
						// 接口返回的总数据量(比如列表有26个数据,每页10条,共3页; 则totalSize值为26)
						let totalSize = 10000; //res.data.length
						// 接口返回的是否有下一页 (true/false)
						// let hasNext = res.hasNextPage
						if (mescroll.num == 1) this.cardList = [] //如果是第一页需手动置空列表
						this.cardList = this.cardList.concat(curPageData) //追加新数据
						  if(this.propSelItem!=null){
						  	this.propSelItem.forEach(item => {
							 	let it = this.cardList.find(x=>x.matid==item.matid);
							 	if(it!=null)	it.sel=true
							 	});
						  }
						// 成功隐藏下拉加载状态
						// 方法一(推荐): 后台接口有返回列表的总页数 totalPage
						mescroll.endByPage(curPageData.length, totalPage)
						this.$nextTick(() => {
							mescroll.endSuccess(curPageData.length)
						})
					} else {
						mescroll.endErr();
					}
				}).catch(exp => {
					// 失败隐藏下拉加载状态
					console.log(exp);
					mescroll.endErr()
				})
			},
			//确定选择
			goodNavButtonClick(e) {
				if (e.content.text === "确定") {
					this.$refs.share.close();
				}
			},
			//查询
			search() {
				this.upCallback(this.mescroll);
			},
			//清空搜关键字
			clearSearch() {
				this.searchVal = '';
				this.downCallback(this.mescroll);
			},
			//弹出层发生变化
			popupchange(e){
				this.goodNavOptions[0].text="选择" + this.propSelItem?.length + "项";
				if(e.show){
					//this.search();
				};
			},
			checkboxChange(e){
				if(e.sel){	
					e.sel=false;
					let itindex = this.propSelItem.findIndex(intem=>item.matid==e.matid);
					this.propSelItem.splice(itindex,1)
				}
				else{ 
					e.sel=true;
					this.propSelItem.push(e);
				}			
				this.goodNavOptions[0].text="选择" + this.propSelItem?.length + "项";
			},
			//关闭
			close(){
				this.$refs.share.close();
			},
		}
	}
</script>

<style lang="scss">
page,.container{
	height: 100%;
}
/* 容器 */
.container{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;
	
	&>view{
		width: 100%;
	}
	
	.scroll-panel{
		flex-grow: 1;
		height: 100%;
		overflow: hidden;
	}
}
	
.list-box{
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start;
	font-size: 28rpx;
	
	.left{
		width: 200rpx;
		background-color: #f6f6f6;
		line-height: 80rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		
		.item{
			padding-left: 20rpx;
			position: relative;
			line-height: 80rpx;
			&:not(:first-child) {
				margin-top: 1px;
			
				&::after {
					content: '';
					display: block;
					height: 0;
					border-top: #d6d6d6 solid 1px;
					width: 620upx;
					position: absolute;
					top: -1px;
					right: 0;
					transform:scaleY(0.5);	/* 1px像素 */
				}
			}
			
			&.active,&:active{
				color: #42b983;
				background-color: #fff;
			}
		}
	}
	.main{
		background-color: #fff;
		padding-left: 20rpx;
		width: 0;
		flex-grow: 1;
		box-sizing: border-box;
		
		.swiper{
			height: 500px;
		}

		.title{
			line-height: 64rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #666;
			background-color: #fff;
			position: sticky;
			top: 0;
			z-index: 999;
		}
		
		.item{
			padding-bottom: 10rpx;
		}
		
		.goods{
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: center;
			align-content: center;
			margin-bottom: 10rpx;
			
			&>image{
				width: 120rpx;
				height: 120rpx;
				margin-right: 16rpx;
				margin-left: 2px;
			}
			
			.describe{
				font-size: 24rpx;
				color: #999;
			}
			
			.money{
				font-size: 24rpx;
				color: #efba21;
			}
		}
	}
}
</style>
